<div nz-row nzType="flex" nzAlign="strecth" nzGutter="16" class="py-md">

  <div nz-col nzSpan="24">
    <nz-card [nzBordered]="false" class="card-top">
      <div nz-row nzType="flex" nzJustify="space-between" nzAlign="middle" [nzGutter]="{md: 12, lg: 16, xl: 24, xxl: 32}">

        <div nz-col>
          <div nz-row nzType="flex" [nzGutter]="{md: 12, lg: 16, xl: 24, xxl: 32}">

            <div nz-col>
              <nz-form-item nz-row nzFlex class="mb0">
                <nz-form-label>站点</nz-form-label>
                <nz-form-control>
                  <nz-cascader [ngModel]="[siteSrv.site?.companyId, siteSrv.site?.id]" [nzOptions]="siteSrv.sites | siteOption:'tree'" (ngModelChange)="changeSite($event)"
                    [nzAllowClear]="false" class="cascader-width-auto"></nz-cascader>
                </nz-form-control>
              </nz-form-item>
            </div>

            <div nz-col>
              <nz-form-item nz-row nzFlex class="mb0">
                <nz-form-label>查询</nz-form-label>
                <nz-form-control>
                  <input nz-input [(ngModel)]="params.keywords" (ngModelChange)="debounceLoadUsers()" placeholder="输入用户名、邮箱、手机或其它信息" class="width-lg">
                </nz-form-control>
              </nz-form-item>
            </div>

          </div>
        </div>

        <div nz-col>
          <button nz-button nzType="primary" (click)="createUser()">
            <i class="anticon anticon-plus"></i>
            <span>创建用户</span>
          </button>
          <nz-dropdown nzPlacement="bottomRight" class="ml-sm">
            <button nz-button nz-dropdown>
              <i class="anticon anticon-ellipsis"></i>
            </button>
            <ul nz-menu>
              <li nz-menu-item (click)="load()">刷新列表</li>
              <!-- <li nz-menu-item>批量删除</li> -->
            </ul>
          </nz-dropdown>
        </div>

      </div>
    </nz-card>
  </div>

  <div nz-col class="width-md">
    <nz-card nzTitle="角色" [nzBordered]="false" class="roles height-full mb0">
      <ul nz-menu nzMode="inline" class="border-right-0">
        <li nz-menu-item [nzSelected]="params.roleId === null" (click)="changeRole(null)" class="my-sm font-weight-bold">
          <div nz-row nzType="flex" nzAlign="middle" nzJustify="space-between">
            <div nz-col class="flex-1 text-truncate">所有用户</div>
            <nz-badge nz-col [nzCount]="config.userCount" [nzStyle]="config.badgeStyle"></nz-badge>
          </div>
        </li>
        <li nz-menu-divider class="mx-md my-sm"></li>
        <li nz-menu-item *ngFor="let item of data.roles" [nzSelected]="params.roleId === item.id" (click)="changeRole(item.id)" class="my0">
          <div nz-row nzType="flex" nzAlign="middle" nzJustify="space-between">
            <div nz-col class="flex-1 text-truncate">{{item.roleName}}</div>
            <nz-badge nz-col [nzCount]="item.userCount || 0" [nzStyle]="config.badgeStyle"></nz-badge>
          </div>
        </li>
        <li nz-menu-divider class="mx-md my-sm"></li>
      </ul>
      <div (click)="createRole()" class="add-roles mb-sm px-lg point line-height-lg">
        <i class="anticon anticon-plus-circle-o mr-sm"></i>
        <span>创建角色</span>
      </div>
    </nz-card>
  </div>

  <div nz-col class="flex-1">
    <nz-card nzTitle="用户列表" [nzBordered]="false" class="height-full mb0">
      <nz-alert *ngIf="config.userHiddenCount" nzBanner [nzShowIcon]="false" [nzMessage]="'已隐藏 ' + config.userHiddenCount + ' 条数据'"></nz-alert>
      <nz-table #usersTable [nzData]="data.displayUsers" [nzShowTotal]="showTotal" [nzLoading]="config.userLoading" nzShowQuickJumper
        nzShowSizeChanger>

        <thead>
          <tr>
            <!-- <th nzShowCheckbox [(nzChecked)]="config.allChecked" [nzIndeterminate]="config.indeterminate" (nzCheckedChange)="checkAll($event)"></th> -->
            <th>账号</th>
            <th>用户名</th>
            <th>邮箱</th>
            <th>手机</th>
            <th nzShowFilter [nzFilters]="config.userStatusOption" (nzFilterChange)="filterStatus($event)">状态</th>
            <th nzShowSort [(nzSort)]="config.expiryDateSort" (nzSortChange)="sortExpiryDate($event)">失效日期</th>
            <th>最后更新人</th>
            <th nzShowSort [(nzSort)]="config.lastModifiedTimeSort" (nzSortChange)="sortLastModifiedTime($event)">最后更新时间</th>
            <th>操作</th>
          </tr>
        </thead>

        <tbody>
          <tr *ngFor="let data of usersTable.data">
            <!-- <td nzShowCheckbox [(nzChecked)]="data.checked" (nzCheckedChange)="refreshStatus($event)"></td> -->
            <td>{{data.account}}</td>
            <td>{{data.username}}</td>
            <td>{{data.email}}</td>
            <td>{{data.mobileNumber}}</td>
            <td [ngSwitch]="data.isValid">
              <ng-container *ngSwitchCase="true">
                <nz-badge nzStatus="success"></nz-badge>
                <span>有效</span>
              </ng-container>
              <ng-container *ngSwitchCase="false">
                <nz-badge nzStatus="error"></nz-badge>
                <span>失效</span>
              </ng-container>
            </td>
            <td>{{data.expiredTime | date: 'yyyy-MM-dd'}}</td>
            <td>{{data.lastModifiedBy}}</td>
            <td>{{data.lastModifiedTime | date: 'yyyy-MM-dd hh:mm:ss'}}</td>
            <td>
              <a (click)="editUser(data)">修改</a>
              <nz-divider nzType="vertical"></nz-divider>
              <nz-popconfirm nzTitle="您确认删除该用户吗？" nzPlacement="topRight" (nzOnConfirm)="deleteUser(data)">
                <a nz-popconfirm>删除</a>
              </nz-popconfirm>
            </td>
          </tr>
        </tbody>

        <ng-template #showTotal let-implicit let-range>
          <div>共 {{ implicit }} 条记录</div>
        </ng-template>

      </nz-table>
    </nz-card>
  </div>

</div>